import React from 'react';
import { Input } from 'antd';
import { Icon } from '@/pages/Recruitment/components';
import styles from './index.less';

export default function InputPassword(props) {
    const [eyeOpen, setEyeOpen] = React.useState(false);
    const inputType = React.useMemo(() => (eyeOpen ? 'text' : 'password'), [eyeOpen]);
    const suffix = React.useMemo(
        () =>
            eyeOpen ? (
                <Icon
                    type="Login_visibleBtn"
                    style={{ fontSize: 20 }}
                    onClick={() => {
                        setEyeOpen(false);
                    }}
                />
            ) : (
                <Icon
                    type="Login_hideBtn"
                    style={{ fontSize: 20 }}
                    onClick={() => {
                        setEyeOpen(true);
                    }}
                />
            ),
        [eyeOpen]
    );
    return (
        <div className={styles.input_con}>
            <Input {...props} suffix={suffix} type={inputType}></Input>
        </div>
    );
}
